<template>
  <div class="cvue-table-multiple">
    <div class="table-wrap">
      <el-table
        :stripe="option.stripe"
        :width="option.width"
        :height="height"
        :border="option.border"
        ref="homeTable"
        show-summary
        :summary-method="getSummaries"
        :class="cssClass"
        class="home-table"
        v-loading="loading"
        @cell-click="handleClick"
        @selection-change="handleSelectionChange"
        :data="data">
        <!-- 复选框 -->
        <el-table-column
          type="selection"
          width="55"
          v-if="option.selected"
          align="center"
          header-align="center">
        </el-table-column>
        <!-- 序号 -->
        <el-table-column
          type="index"
          :width="indexWidth"
          v-if="option.index"
          align="center"
          label="序号">
        </el-table-column>
        <!-- 循环列 -->
        <cloumn-item 
          v-for="(cloumn, index) in option.cloumn"
          :key="index" 
          :cloumn="cloumn"
          :pageSize="pageSize" 
          :tablePage="tablePage">
        </cloumn-item>
        <slot name="multipleCloumn"></slot>
        <slot name="singleCloumn"></slot>
        <!-- 操作按钮 -->
        <slot name="actionMenu"></slot>
      </el-table>
    </div>
    <div class="page" v-show="isShowPage">
      <el-pagination
        :current-page="page.currentPage"
        background
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :layout="layout"
        :total="page.total"
        :pager-count="5"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import cloumnItem from './cloumn-item.vue'
export default {
  name: 'cvueTableMultiple',
  components: {
    cloumnItem
  },
  data () {
    return {
    }
  },
  props: {
    isShowPage: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: () => {
        return {}
      }
    },
    option: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    data: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    totalData: {
      type: Array,
      default: () => {
        return []
      }
    },
    cssClass: {
      type: String,
      default: ''
    },
    isIndexTotal: {
      type: Boolean,
      default: false
    },
    isShowSummary: {
      type: Boolean,
      default: false
    },
    isShowTotalSummary: {
      type: Boolean,
      default: false
    },
    summaryType: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 100
    },
    indexWidth: {
      type: Number,
      default: 62
    },
    summaryFun: {
      type: Function,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: 'total,sizes,prev,pager,next,jumper'
    },
    tablePage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.$emit('current-change', val)
    },
    handleSizeChange (val) {
      this.$emit('size-change', val)
    },
    handleClick (row, index, prop) {
      this.$emit('cellClick', row, index, prop)
    },
    handleSelectionChange (val) {
      this.$emit('select-change', val)
    },
    getSummaries(param) {
      var sums = []
      param.columns.forEach((item, index) => {
        sums[index] = this.totalData.length > 0 ? this.totalData[0][item.property] : ''
      })
      if (sums[1] === undefined) {
        sums[1] = '合计'
      }else{
        sums[0] = '合计'
      }
      return sums
    },
    isInteger(obj) {
      return obj%1 === 0
    }
  }
}
</script>
<style lang="scss">
.cvue-table-multiple {
  .page {
    text-align: right;
    padding-top: 15px;
    .el-input__inner {
      border-radius: 4px;
      border: 1px solid #dcdfe6;
    }
    .el-pagination{
      margin:0;
    }
  }
  .el-table thead tr th {
    background-color: #f6f6fd;
    color: #333;
  }
}
</style>
